<template>
  <div class="detail-container">
    <div class="header" style="margin:0 20px ">
      <el-page-header @back="goBack" content="发帖详情">
      </el-page-header>
      <el-divider></el-divider>
    </div>
    <div v-if="!post" class="juzhong">
      <span><i class="el-icon-loading"></i>加载中</span>
      <el-divider></el-divider>
    </div>
    <div v-else class="detail-content">
      <div class="left-block juzhong">
        <el-avatar shape="circle" :size="100"
                   :src="post.img_url"
                   style="margin-bottom: 10px">
        </el-avatar>
        <div style="margin-bottom: 10px">{{ post.nickname }}</div>
        <div style="margin-bottom: 10px">
          <el-tag> {{ enumUser[post.user_type] }}</el-tag>
        </div>
      </div>
      <div class="right-block">
        <div class="juzhong">
          <h2>{{ post.post_title }}</h2>
          <div style="margin-top: 20px">
            当前状态:
            <el-tag style="margin-right: 10px"
                    :type="post.status ? 'success' : 'danger'"
                    disable-transitions>{{ post.status ? '正常' : '违规' }}
            </el-tag>
            <el-tag v-if="post.is_top" type="warning" style="margin-right: 10px">置顶</el-tag>
            发布时间：{{ post.update_time }}
          </div>
        </div>
        <el-divider></el-divider>
        <div v-html="post.post_content"></div>
        <el-button type="primary" @click="handleAudit()">审核</el-button>
      </div>
    </div>
    <el-dialog @close="btnCancel" width="50vw" title="发帖详情" :visible.sync="isAudit" append-to-body>
      <div class=" juzhong">
        <h2>审核</h2>
        <el-radio-group v-model="ispass">
          <el-radio :label="1" size="large">通过</el-radio>
          <el-radio :label="0" size="large">不通过</el-radio>
        </el-radio-group>
        <br>
        <div v-if="!ispass">
          <el-input class="unpass_reason"
                    type="textarea"
                    style="width: 400px"
                    placeholder="请写出不通过的理由"
                    v-model="adminLog.reason"
                    :rows="8"
                    clearable>
          </el-input>
          <br>
          <div style="margin: 5px 0">上次审核时间：{{ adminLog.create_time }}</div>
          <div style="margin: 5px 0">审核员：{{ adminLog.username }}</div>
          <br>
        </div>
        <el-button type=" primary
          " @click="handlePass">提交
        </el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
import {getAuditLog, getDictEnum} from "@/api/commen";
import {auditPost, getPostById} from "@/api/comment"
import {Message} from "element-ui";

export default {
  name: 'postDetail',
  data() {
    return {
      post: null,
      enumUser: {},
      postId: this.$route.params.postId,
      isAudit: false,
      adminLog: {status: null},
      ispass: 1
    }
  },
  methods: {
    async handleAudit() {
      this.isAudit = true;
      console.log(this.isPass);
      if (!this.spost.status) {
        const data = {
          content_id: this.postId,
          content_type: 'post'
        }
        this.adminLog = await getAuditLog(data);
      }
      this.ispass = this.post.status;
    },
    btnCancel() {
      this.isAudit = false;
    }, async handlePass() {
      try {
        this.adminLog.status = this.ispass;
        this.adminLog.content_type = 'post';
        this.adminLog.admin_id = this.$store.getters.userId;
        this.adminLog.content_id = this.postId;
        await auditPost(this.adminLog);
        this.isAudit = false;

        Message.success("审核成功！");
        await this.getPost();

      } catch (e) {
        console.error("审核失败:", error);
        Message.error("审核失败");
      }
    },
    goBack() {
      this.$router.push('/comment/post');
    },
    async getType() {
      const userType = await getDictEnum('用户权限');
      // acc是累积器
      this.enumUser = userType.reduce((acc, item) => {
        acc[item.enum_key] = item.enum_value;
        return acc;
      }, {});
    },
    async getPost() {
      this.post = await getPostById(this.postId);
    },
  },
  mounted() {
    this.getType();
    this.getPost();
  }
}
</script>

<style scoped lang="scss">
.detail-container {
  padding: 30px;
  width: 100%;
  height: 100%;
}

.detail-content {
  display: flex;
  width: 100%;
}

.left-block {
  flex: 1;
}

.right-block {
  padding: 20px;
  flex: 4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.detail-bottom {
  margin: 20px auto;
  float: right;
}
</style>
